<template>
	<s-layout navbar="inner1"  :bgStyle="{ color: '#fff' }" :onShareAppMessage="shareInfo">
		<assNavbar :title="state.data.name" :background="{
			img:'none',
			BGcolor:'#F7D142'
		}"/>
		<view class="bgTop"></view>
		<view class="content ss-p-x-38">
			
			<view class="blockM">
				<view class="font-2 ss-line-2">{{state.data.name}}</view>
				<!-- 根据评分显示 -->
				<view class="rate ss-m-t-12 ss-flex-row ss-row-left ss-col-center">
				<template v-if="bolidStar > 0"  v-for="i in bolidStar" :key="i" >
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
				
				<template v-if="emptyStar>0" v-for="h in emptyStar" :key="h">
					<image   src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202408301441591230.png" mode="aspectFill" class="selected ss-m-r-8"></image>
				</template>
					<view style="color:#FBA503;">{{bolidStar.toFixed(1)}}</view>
				</view>
				<!--优惠 -->
				<view class="ss-flex ss-m-t-4">
					<image style="width:32rpx;height:32rpx" :src="sheep.$url.cdn('/storage/sjrz/20250403/d8f90d6a3714565c18be1cda55acd2ec.png')" mode="aspectFill"></image>
					<view style="color:#9E9E9E" class="ss-m-l-10">优惠15%</view>
				</view>
				<scroll-view class="scroll" scroll-x="true">
					<template v-for="(item,index) in state.data.bannerList" :key="index">
						<image @tap="onImgPreview(state.data.bannerList,index)" :src="sheep.$url.cdn(item)" class="scroll-item "></image>
					</template>
					<!-- <image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item "></image>
					<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
					<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
					<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image>
					<image :src="sheep.$url.cdn('/storage/default/20250320/54aa996a6bf09dc04743ee294ecee9b0.jpeg')" class="scroll-item"></image> -->
				</scroll-view>
			</view>
			
			<view class="blockM ss-m-t-20" style="font-size:30rpx;color:#9E9E9E;line-height:1.4em">
				<view class="ss-flex justify-between align-start">
					<view style="width:480rpx">
						<view>
							{{state.data.business_status=='ing'?'营业中':'休息中'}} 
							<text v-for="(item,index) in state.data?.business_rule[0].cycle" :key="index">{{weekMap[item]}}&nbsp;</text>
							<text v-if="state.data?.business_rule[0].time_begin=='00:00:00'&&state.data?.business_rule[0].time_end=='00:00:00'">24小时营业</text>
							<template v-else>
								<text v-if="state.data?.business_rule[0].time_begin&&state.data?.business_rule[0].time_end">{{state.data?.business_rule[0].time_begin}}-{{state.data?.business_rule[0].time_end}}</text>
							</template>
						</view>
						<view>{{state.data?.address}}</view>
					</view>
					<image @tap="call" style="width:50rpx;height:50rpx " :src="sheep.$url.cdn('/storage/sjrz/20250403/20b5d0e9383ba5c46816e024a131db26.png')"></image>
				</view>
				<view class="line ss-m-t-20 ss-m-b-10"></view>
				<view @tap="goPage('comment')">评价</view>
				<view class="line ss-m-t-20 ss-m-b-10"></view>
				<view @tap="goPage('merchant')">查看商家资质</view>
			</view>
			<view class="blockM ss-m-t-20 ss-flex justify-between" style="font-size:30rpx">
				<view>
					<view class="ss-flex ss-m-b-20">
						<image style="width:40rpx;height:40rpx " :src="sheep.$url.cdn('/storage/sjrz/20250403/ee18e7a6d7ddd90848bc2ad97d20b5c8.png')"></image>
						<view class="ss-m-l-10">鲸囍买单</view>
					</view>
					<view>鲸囍买单有惊喜</view>
				</view>
				<button class="ss-reset-button btn" @click="toPlay">买单</button>
			</view>
			
			<view v-if="state.status!=1" class="font-1 ss-m-t-20 text-center" style="color:#ccc">请等待进件成功后获取支付码...</view>
			
			
		</view>
		
		<su-popup :show="state.showImg" type="center" round="10" @close="state.showImg=false">
		  <image style="width:500rpx;height:500rpx " :src="sheep.$url.cdn(state.data.business_linence)"></image>
		</su-popup>
		
		<su-fixed bottom>
		  <view class="bg-white ss-flex justify-around ss-p-y-38" style="font-size:30rpx;color:#9E9E9E;box-shadow: 0px -6px 10px 0px rgba(0, 0, 0, 0.3);">
		    <view @tap="handelBottom(1)">去打卡</view>
			<view @tap="handelBottom(2)">分享好店</view>
			<view @tap="handelBottom(3)">写评价</view>
		  </view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import merchantApi from "@/sheep/api/merchant.js"
	import _ from 'lodash'
	import {
		showShareModal
	} from '@/sheep/hooks/useModal';
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
	const state = reactive({
		title:'鲸囍生活圈',
		id:'',
		mark:3.0,
		data:{
			business_rule:[{}],
		},
		showImg:false,
		status:0,
	})
	
	const weekMap={
		'monday':'周一',
		'tuesday':'周二',
		'wednesday':'周三',
		'thursday':'周四',
		'friday':'周五',
		'saturday':'周六',
		'sunday':'周日',
	}
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44 -44))
	
	//实心星星数量
	const bolidStar = computed(()=>{
		
		return parseInt(state.mark);
	
	})
	
	//计算空心
	const emptyStar = computed(()=>{
		
		if(Math.ceil(state.mark)==5){
			
			if(parseFloat(state.mark)<5){
				return 1;
			}else if(parseFloat(state.mark)==5){
				return 0;
			}
		}else{
			return 5-Math.ceil(state.mark);
		}
	})
	
	function goPage(str){
		if(str=='merchant'){
			state.showImg=true
		}else{
			sheep.$router.go('/pages/merchant/surprise/commentList',{
				id:state.id,
				title:state.data.name,
				mark:state.mark,
				img:state?.data?.banner?.cover ? encodeURIComponent(state?.data?.banner?.cover) :''
			})
		}
	}
	
	function handelBottom(index){
		if(index==1){
			uni.showToast({
				title:'暂未开放',
				icon:'none'
			})
		}else if(index==2){//分享
			showShareModal();
		}else if(index==3){
			sheep.$router.go('/pages/merchant/surprise/comment',{id:state.id,title:state.title})
		}
	}
	
	
	const shareInfo = computed(() => {
		if (_.isEmpty(state.data)) return {};
		var obj=sheep.$platform.share.getShareInfo({
			
			title: state.data.name,
			image: sheep.$url.cdn(state.data?.banner?.cover),
			desc: state.data.intro,
			params: {
				page: '8',
				query: state.id,
			},
		}, {
			id: state.id,
			type: 'store', // 商品海报
			title: state.data.name, // 商品标题
			image: sheep.$url.cdn(state.data?.banner?.cover), // 商品主图
		},);
		obj.path=`/pages/merchant/surprise/shop?id=${state.id}`
		return obj
	});
	
	
	function toPlay(){
		console.log('----')
		sheep.$router.go('/pages/merchant/surprise/pay',{
			id:state.id,
			title:state.title,
			img:state?.data?.banner?.cover ? encodeURIComponent(state?.data?.banner?.cover) :''
		})
	}
	
	async function getShop(){
		let res = await sheep.$api.merchant.surprise.shopDetail(state.id)
		state.data = res.data
		state.data.bannerList=[]
		Object.entries(state.data.banner).forEach(item=>{
			if(item[1]){
				state.data.bannerList.push(sheep.$url.cdn(item[1]+'?'+item[0]))
			}
		})
		state.mark=res.data.mark
	}
	
	function call(){
		uni.makePhoneCall({
			phoneNumber: state.data.mobile //仅为示例
		});
	}
	
	// 预览图片
	function onImgPreview(urls,current) {
		// console.log(urls,current)
		uni.previewImage({
		  urls,
		  current,
		});
	}
	
	async function getStatus(){//查看进件状态
		const res = await sheep.$api.commission.merchant.applyList({
		  serve: 3,//惊喜
		  type: 2,//1入驻  2进件
		  mobile:sheep.$store('user').userInfo.mobile
		})
		if(res.error==0&&res.data.length>0){
			state.status=res.data[0].status
		}
	}
	
	onLoad((opt)=>{
		console.log(opt)
		if(opt.name){
			state.title = opt.name
		}
		if(opt.id){
			state.id = opt.id
			getShop()
		}
		if(opt.scene){
			var scene= decodeURIComponent(opt.scene).split('=')
			state.id=scene[1]
		}
		
	})
	
	
	onShow(()=>{
		if(state.id){
			getShop()
		}
	})
	
</script>

<style lang="scss" scoped>
	
	
	.bgTop{
		width:100%;
		height:640rpx;
		margin-top:v-bind('-sys_navBar+"px"');
		margin-bottom:-420rpx;
		background: linear-gradient(180deg, #F7D142 21%, #FCFDFF 71%, #FFFFFF 71%);
	}
	
	
	.content{
		.blockM{
			padding:20rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			.rate{
				.selected{
					width:30rpx;
					height:30rpx;
				}
				.recommend{
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
				}
				.num{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
				}
			}
			.scroll {
				white-space: nowrap;
				width: 100%;
				margin-top:20rpx;
				height:150rpx;
				.scroll-item{
					display: inline-block;
					width: 156rpx;
					height: 139rpx;
					margin-right: 20rpx;
				}
			}
			.line{
				height:2rpx;
				background-color: #D8D8D8;
			}
		}
		.btn{
			width: 177rpx;
			height: 73rpx;
			border-radius: 100rpx;
			font-size: 36rpx;
			color:#393939;
			background: #EDEDED;
		}
		
	}
</style>